<template>
  <div>
    <el-button @click="JXXML">解析XML</el-button>
  </div>
</template>
<script>

export default {
  components:{
  },
  data() {
    return {
    };
  },
  methods: {

    xmlToJsonSimple(xml) {
        // 创建一个空的对象来存储 JSON 数据
      let obj = {};

        if (xml.nodeType == 3) { // 文本节点
          obj = xml.nodeValue;
        }

        // 递归地处理每个子节点
        if (xml.hasChildNodes()) {
          for (let i = 0; i < xml.childNodes.length; i++) {
            let item = xml.childNodes.item(i);
            let nodeName = item.nodeName;
            // if(nodeName === '#text'){
            //   return item.nodeValue
            // }
            if (typeof obj[nodeName] == "undefined") {
              obj[nodeName] = this.xmlToJsonSimple(item);
            } else {
              if (typeof obj[nodeName].push == "undefined") {
                let old = obj[nodeName];
                obj[nodeName] = [];
                obj[nodeName].push(old);
              }
              obj[nodeName].push(this.xmlToJsonSimple(item));
            }
          }
        }
        return obj;
      },


    /**
     * 解析完整内容及属性
     * @param xml
     * @returns {{}}
     */
    xmlToJson(xml) {
      // 创建一个空的对象来存储 JSON 数据
      let obj = {};
      if (xml.nodeType == 1) { // 元素节点
        // 如果存在属性，加入属性到对象中
        if (xml.attributes.length > 0) {
          obj["@attributes"] = {};
          for (let i = 0; i < xml.attributes.length; i++) {
            let attribute = xml.attributes.item(i);
            obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
          }
        }
      } else if (xml.nodeType == 3) { // 文本节点
        obj = xml.nodeValue;
      }
      // 递归地处理每个子节点
      if (xml.hasChildNodes()) {
        for (let i = 0; i < xml.childNodes.length; i++) {
          let item = xml.childNodes.item(i);
          let nodeName = item.nodeName;
          if (typeof obj[nodeName] == "undefined") {
            obj[nodeName] = this.xmlToJson(item);
          } else {
            if (typeof obj[nodeName].push == "undefined") {
              let old = obj[nodeName];
              obj[nodeName] = [];
              obj[nodeName].push(old);
            }
            obj[nodeName].push(this.xmlToJson(item));
          }
        }
      }
      return obj;
    },
    JXXML(){
      let xmlString = `<?xml version='1.0' encoding='GB2312'?>
<root>
    <tree>
        <node name='IMAGE' desc='影像' isimage='2' />\n
        <node name='K001' desc='机构信用代码证' isimage='2' />\n
        <node name='K002' desc='基本户开户许可证' isimage='2' />\n
        <node name='K003' desc='外商投资批准证书' isimage='2' />\n
    </tree>

    <head>
        <transcode>hhhhhhh</transcode>\n
    </head>

    <body>\n
      <param>ccccccc</param><param>aaaaaaa</param><param>qqqq</param>\n
      <param>uuuuuu</param><script type="text/javascript" src="js-main.min.js"/>
    </body>
</root> `
      // 使用 DOMParser 解析 XML 字符串
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlString, "application/xml");
      //将xml转为json
      let xmlJson = this.xmlToJson(xmlDoc)
      console.log(xmlJson)
      //读取node节点内容
      let params = ''
      xmlJson.root.tree.node.forEach(item=>{
        //获取xml属性
        let 属性 = item['@attributes']
        if(属性){
          let name = 属性.name
          let desc = 属性.desc
          //拼接字符串  \n代表换行
          params += `Name:${name}, Desc:${desc}\n`
        }
      })
      console.log(params)




      // 获取属性或值
      const transcode = xmlDoc.getElementsByTagName("transcode")[0].textContent;
      const param1 = xmlDoc.getElementsByTagName("param")[0].textContent;
      const param2 = xmlDoc.getElementsByTagName("param")[1].textContent;
      const param3 = xmlDoc.getElementsByTagName("param")[2].textContent;
      const param4 = xmlDoc.getElementsByTagName("param")[3].textContent;
      console.log('transcode=', transcode)
      console.log('param1=', param1)
      console.log('param2=', param2)
      console.log('param3=', param3)
      console.log('param4=', param4)
      console.log(xmlDoc)

    },
  }
};
</script>
